<template>
    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="600" :styles="{top: '30px'}">
        <Form ref="form" :model="fromModel" :label-width="80" >
            <div v-if="showParent">
                <FormItem label="课程分类：">{{parentTitle}}</FormItem>
            </div>
            <FormItem label="课程标题" prop="courseTypeName" required error="分类名称不能为空">
                <Input v-model="fromModel.courseTypeName"/>
            </FormItem>
            <FormItem label="课程价格" prop="coursePrice" required error="分类名称不能为空">
                <InputNumber :max="10000" v-model="formModel.coursePrice" :formatter="value => `$ ${formModel.coursePrice}`.replace(/B(?=(d{3})+(?!d))/g, ',')" :parser="value => value.replace(/¥s?|(,*)/g, '')"></InputNumber>
            </FormItem>
            <FormItem label="排序号" prop="sortOrder">
                <InputNumber v-model="fromModel.sortOrder"/>
                <span style="margin-left:5px">值越小越靠前</span>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="text" @click="cancel">取消</Button>
            <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
        </div>
    </Modal>
</template>

<script>
    import {addCrouseType, editCrouseType} from "@/api/bus";

    export default {
        name: "courseTypeModal",
        data() {
            return {
                accessToken: {},
                modalType: 0,
                modalTitle: "",
                showParent: false,
                parentTitle: '',
                submitLoading: false,
                modalVisible: false,
                fromModel: {
                    id:"",
                    parentId:"",
                    coursePrice:0,
                    courseTypeName: "",
                    sortOrder: 0
                },
                formRules: {

                }
            }
        },
        methods: {
            init() {
                this.accessToken = {
                    accessToken: this.getStore("accessToken")
                };

            },
            add(node) {
                this.$refs.form.resetFields();
                this.modalType=0;
                if (node&&node.id) {
                    this.showParent = true;
                    this.fromModel.parentId=node.id;
                    this.parentTitle = node.title;
                } else {
                    this.showParent = false;
                    this.fromModel.parentId=0;
                    this.parentTitle = "";
                }
                this.setModalVisible('添加-课程分类', true);
            },
            edit(node) {
                this.modalType=1;
                if (node&&node.id) {
                    this.fromModel.id = node.id;
                    this.fromModel.parentId=node.parentId;
                    this.fromModel.courseTypeName=node.title;
                    this.fromModel.sortOrder=node.sortOrder;
                    if(node.parentId==0){
                        this.showParent = false;
                        this.parentTitle = "";
                    }else{
                        this.showParent = true;
                        this.parentTitle = node.title;
                    }
                }
                this.setModalVisible('编辑-课程分类', true);
            },
            setModalVisible(title, visible) {
                this.modalTitle = title;
                this.modalVisible = visible;
            },
            cancel() {
                this.modalVisible = false;
            },
            submit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            // 避免编辑后传入id
                            delete this.fromModel.id;
                            this.submitLoading = true;
                            addCrouseType(this.fromModel).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("添加成功");
                                    this.$parent.getTreeData();
                                    this.modalVisible = false;
                                }
                            });
                        } else {
                            // 编辑
                            editCrouseType(this.fromModel).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("修改成功");
                                    this.$parent.getTreeData();
                                    this.modalVisible = false;
                                }
                            });
                        }
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style>

</style>